<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-04 22:12:02
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-16 17:10:49
 * @FilePath: /chat-ai-plus/src/components/ChatHistory/ChatHistoryGroup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="chat-history-group">
    <!-- <div class="heading">前 30 天</div> -->
    <div class="chat-list mt_xs">
      <div
        class="chat-item justify_between"
        v-for="item in data"
        :key="item.id"
       
      >
        <div class="align-items_center gap_xs flex py_sm t_line"  @click="handleClick(item)">
          <u-icon class="icon" name="chat-fill"></u-icon>
          <div class="content t_line">
            {{ item.roomName || '新对话' }}
          </div>
        </div>

        <div class="align-items_center">
          <u-icon class="icon icon-btn" name="star" @click="handleCollect(item)"></u-icon>
          <u-icon class="icon icon-btn ml_xs" name="trash" @click="handleRemove(item)"></u-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { base64 } from '@/utils/encipher';
import useChatStore from '@/store/modules/chat';
import emitter from '@/utils/emitter';

export default defineComponent({
  name: 'ChatHistoryGroup',
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    archive: {
      type: Number,
      default: 0,
    }
  },
  setup(props) {
    const chatStore = useChatStore();
    const handleClick = (item: any) => {
      chatStore.setCurrentRoom(item);
      chatStore.getConversationsById({ roomId: item.id });
    };

    const handleRemove = (item: any) => {
      chatStore.removeTopic(item.id);
      
    };
  
  

    const handleCollect = (item) => {
      if(props.archive === 1) {
        chatStore.unCollectTopic(item.id);
      }else {
        chatStore.collectTopic(item.id);
      }
     
    }
    return {
      handleClick,
      handleRemove,
      handleCollect,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import './index.scss';
.chat-history-group {
  & + .chat-history-group {
    margin-top: map-get($spaces, default);
  }
}
</style>
